<template>
  <HeaderBar
      title="详情"
      navBarBgc="linear-gradient(180deg, rgba(186,209,194,1) 0%, rgba(207,223,212,1) 33%, rgba(230,238,233,1) 100%);"
  ></HeaderBar>
  <view class="payment-container">
    <view class="product-card">
      <view class="product-name">阿坝旅游网</view>
      <view class="product-price">
        <text style="font-size: 54rpx;">￥</text>
        {{totalPrice}}
      </view>
      <view class="countdown">支付剩余时间 {{ countdownTime }}</view>
    </view>

    <!-- Payment Methods -->
    <view class="payment-methods">
      <text class="section-title">请选择支付方式</text>

      <radio-group @change="handlePaymentMethodChange">
        <view class="method-item" v-for="method in paymentMethods" :key="method.value">
          <view class="method-left">
            <image class="method-icon" :src="method.icon" mode="aspectFit"></image>
            <text class="method-name">{{ method.name }}</text>
          </view>
          <radio :value="method.value" :checked="selectedMethod === method.value" color="#07C160"/>
        </view>
      </radio-group>
    </view>

    <!-- Payment Button -->
    <view class="payment-btn-container">
      <button class="payment-btn" @click="handlePayment">去支付</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import {defineComponent, ref, onMounted, onBeforeUnmount} from 'vue';
import wxPay from "@/utils/pay";
import HeaderBar from "@/components/HeaderBar/index.vue"; // 引入图片

type PaymentMethod = {
  value: string;
  name: string;
  icon: string;
};
interface WxMinProgramParameter {
  timeStamp:string;
  nonceStr:string;
  packageValue:string;
  signType:string;
  paySign:string
}

interface NavParameter extends WxMinProgramParameter {
  totalPrice:string;
  orderId:string;
  orderType:string;
}



// Countdown timer
const countdownTime = ref('14:59');
let timer: number | null = null;

// Payment methods data
const paymentMethods = ref<PaymentMethod[]>([
  { value: 'wechat', name: '微信支付', icon: 'http://img.jowong.com/aba/2025-03-28/weixinzhifu_1743146328319.png' },
  { value: 'alipay', name: '支付宝支付', icon: 'http://img.jowong.com/aba/2025-03-28/zhifubaozhifu_1743146348562.png' },
  { value: 'bank', name: '银行卡支付', icon: 'http://img.jowong.com/aba/2025-03-28/yinhangka_1743146360295.png' },

]);
const selectedMethod = ref<string>('wechat');
const wxMinProgramParameter = ref<WxMinProgramParameter>({
  timeStamp: "",
  nonceStr: "",
  packageValue: "",
  signType: "",
  paySign: ""
});
const orderId = ref<string>("");
const totalPrice = ref<string>("");
const orderType = ref<string>(null);

// Start countdown
const startCountdown = () => {
  let minutes = 14;
  let seconds = 59;

  timer = setInterval(() => {
    if (seconds === 0) {
      if (minutes === 0) {
        clearInterval(timer as number);
        uni.showToast({
          title: '支付超时，请重新下单',
          icon: 'none'
        });
        return;
      }
      minutes--;
      seconds = 59;
    } else {
      seconds--;
    }

    countdownTime.value = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
  }, 1000);
};

// Handle payment method change
const handlePaymentMethodChange = (e: UniHelper.RadioGroupOnChange) => {
  selectedMethod.value = e.detail.value;
};

// Handle payment
const handlePayment = () => {
  console.log(selectedMethod.value);
  if (!selectedMethod.value) {
    uni.showToast({
      title: '请选择支付方式',
      icon: 'none'
    });
    return;
  }

  // uni.showLoading({title: '支付中...'});

  switch (selectedMethod.value) {
    case "wechat":
      const { timeStamp, nonceStr, packageValue, signType, paySign } = wxMinProgramParameter.value;
      wxPay(timeStamp,nonceStr,packageValue,signType,paySign,orderId.value,orderType.value);
      break;
  }

  /*// Simulate payment processing
  setTimeout(() => {
    uni.hideLoading();
    uni.showToast({
      title: '支付成功',
      icon: 'success'
    });

    // Navigate to success page after payment
    setTimeout(() => {
      uni.redirectTo({
        url: '/ticketSubPack/pages/OrderCompleted/index'
      });
    }, 1500);
  }, 2000);*/
};

onMounted(() => {
  startCountdown();
});
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer);
  }
});
onLoad((options:NavParameter) => {
  console.log(options,'options');
  let {
    totalPrice:_totalPrice,
    timeStamp,
    nonceStr,
    packageValue,
    signType,
    paySign,
    orderId:_orderId,
    orderType: _orderType,
  } = options;
  orderId.value = _orderId;
  totalPrice.value = _totalPrice;
  orderType.value = _orderType;
  wxMinProgramParameter.value = {
    timeStamp,
    nonceStr,
    packageValue:decodeURIComponent(packageValue),
    signType,
    paySign:decodeURIComponent(paySign)
  };
});

</script>

<style scoped>
.payment-container {
  background: linear-gradient(180deg, rgba(231,239,234,1) 0%, rgba(239,244,241,1) 33%, rgba(255,255,255,1) 100%);
  padding: 20rpx;
  min-height: 100vh;
}

.payment-title {
  height: 62rpx;
  display: flex;
  padding: 13% 20rpx;
}

.backImg {
  height: 70%;
  width: 20rpx;
}

.payment-name {
  width: 100%;
  height: 100%;
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 33rpx;
  color: #2B2B24;
  text-align: center;
}

.product-card {
  text-align: center;
  border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.product-name {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 29rpx;
  color: #2B2B24;
  line-height: 35rpx;
  margin-bottom: 40rpx;
}

.product-price {
  font-family: PingFang SC;
  font-weight: 800;
  font-size: 78rpx;
  color: #AA5413;
  line-height: 35rpx;
  margin-bottom: 30rpx;
}

.countdown {
  font-family: PingFang SC;
  font-weight: 500;
  font-size: 25rpx;
  color: #2B2B24;
  line-height: 17rpx;
}

.payment-methods {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-family: PingFang SC;
  font-weight: bold;
  font-size: 29rpx;
  color: #2B2B24;
  line-height: 35rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.method-item {
  height: 111rpx;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15rpx 30rpx;
  margin: 30rpx;
  background-color: #EEF0DF;
}

.method-left {
  display: flex;
  align-items: center;
}

.method-icon {
  width: 65rpx;
  height: 65rpx;
  margin-right: 20rpx;
}

.method-name {
  font-size: 30rpx;
}

.payment-btn-container {
  padding: 30rpx;
}

.payment-btn {
  height: 92rpx;
  color: #fff;
  background: #1B9C61;
  border-radius: 10rpx;
  line-height: 90rpx;
}

.payment-btn::after {
  border: none;
}
</style>
